<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px" class="form">
        <el-form-item label="企业编号">
          <el-input v-model.trim="form.eid" />
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model.trim="form.name" />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model.trim="form.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="禁用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="add">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="userList" border style="width: 100%">
        <el-table-column fixed label="序号" type="index" width="100" />
        <el-table-column prop="eid" label="企业编号" />
        <el-table-column prop="name" label="企业名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="status" label="状态" />
        <el-table-column fixed="right" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="edit(row)"
            >编辑</el-button>
            <el-button type="text" size="small" @click="changeStatus(row)">{{
              row.status === '启用' ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="del(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageInfo.page"
        :page-size.sync="pageInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        :page-sizes="[1, 5, 10, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 对话框 -->
    <enDialog ref="enDialog" @getEnList="getEnList" />
  </div>
</template>

<script>
import { getEnList, enStatus, delEn } from '../../api/enterprise'
import enDialog from './components/enDialog'
export default {
  name: 'UserList',
  components: {
    enDialog
  },
  data() {
    return {
      userList: [],
      form: {
        username: '',
        email: '',
        role_id: ''
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: null
      }
    }
  },
  created() {
    this.getEnList()
  },

  methods: {
    async changeStatus(val) {
      console.log(111)
      const res = await enStatus(val.id)
      console.log(res)
      this.getEnList()
    },
    async del(val) {
      await delEn(val.id)
      this.$message.success('删除用户成功')
      this.getEnList()
    },
    edit(val) {
      this.$refs.enDialog.form = val
      this.$refs.enDialog.meta = '编辑企业'
      this.$refs.enDialog.showDialog = true
    },
    add() {
      this.$refs.enDialog.meta = '新增企业'
      this.$refs.enDialog.showDialog = true
    },
    reset() {
      this.getEnList()
      this.form = {}
    },
    async search() {
      await this.getEnList(this.form)
    },
    async getEnList(val) {
      const res = await getEnList({
        ...this.pageInfo,
        ...val
      })
      console.log(res)
      this.pageInfo.total = res.total
      this.userList = res.data.items.map(v => {
        if (v.status === 1) {
          v.status = '启用'
        } else {
          v.status = '禁用'
        }
        return v
      })
      this.pageInfo.total = res.data.pagination.total
    },
    handleSizeChange() {
      this.getEnList(this.form)
    },
    handleCurrentChange() {
      this.getEnList(this.form)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
.form  .el-form-item {
    display: inline-block;
  }

  .el-form-item__label {
    font-weight: normal;
  }
  .el-pagination{
    text-align: center;
    margin-top: 20px;
  }
}
</style>
